<style lang="less" scoped>
@import "./own-spaces.less";
</style>

<template>
  <div class="own-space">
    <Card class="own-space-new">
      <div class="own-wrap">
        <div style="width: 240px">
          <Menu :active-name="activeName" theme="light" @on-select="changeMenu">
            <MenuItem name="基本信息">基本信息</MenuItem>
            <MenuItem name="安全设置">安全设置</MenuItem>
            <!-- <MenuItem name="第三方账号绑定">第三方账号绑定</MenuItem> -->
            <MenuItem name="消息通知">消息通知</MenuItem>
          </Menu>
        </div>
        <div style="padding: 8px 40px; width: 100%">
          <div class="title-text">{{ currMenu }}</div>
          <div>
            <div v-show="currMenu == '基本信息'">
              <Form
                ref="userForm"
                :model="userForm"
                :label-width="90"
                label-position="left"
              >
                <FormItem label="登录账号：" prop="username">{{
                  userForm.username
                }}</FormItem>
                <FormItem label="用户头像：">
                  <upload-pic-thumb
                    v-model="userForm.avatar"
                    :multiple="false"
                  ></upload-pic-thumb>
                </FormItem>
                <FormItem label="用户名：" prop="nickName">
                  {{ userForm.nickName }}
                  <!-- <Input v-model="userForm.nickName" style="width: 300px" /> -->
                </FormItem>
                <!-- <FormItem label="性别：">
                  <RadioGroup v-model="userForm.sex">
                    <Radio
                      v-for="(item, i) in dictSex"
                      :key="i"
                      :label="item.value"
                      >{{ item.title }}</Radio
                    >
                  </RadioGroup>
                </FormItem> -->
                <!-- <FormItem label="生日：">
                  <DatePicker
                    v-model="userForm.birth"
                    @on-change="changeBirth"
                    style="width: 300px"
                    type="date"
                  ></DatePicker>
                </FormItem> -->
                <FormItem label="收货地址：">
                  <Cascader
                    style="width: 210px"
                    v-model="userForm.addressSelection"
                    :data="AddressData"
                    :load-data="addLoadingProvinceloadData"
                    @on-change="getStartArea"
                    clearable
                  ></Cascader>
                </FormItem>
                <FormItem label="详细地址：" prop="street">
                  <Input v-model="userForm.street" style="width: 300px" />
                </FormItem>
                <!-- <FormItem label="个人简介：" prop="description">
                  <Input
                    v-model="userForm.description"
                    type="textarea"
                    style="width: 300px"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    placeholder="个人简介"
                  ></Input>
                </FormItem> -->
                <FormItem label="所属部门：">
                  <span>{{
                    userForm.departmentTitle == "" ||
                    userForm.departmentTitle == null
                      ? "无"
                      : userForm.departmentTitle
                  }}</span>
                </FormItem>
                <FormItem label="用户类型：">
                  <span>{{ userForm.typeTxt }}</span>
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style="width: 100px; margin-right: 5px"
                    :loading="saveLoading"
                    @click="saveEdit"
                    >保存</Button
                  >
                </FormItem>
              </Form>
            </div>
            <div v-show="currMenu == '安全设置'" class="safe">
              <div class="item">
                <div>
                  <div class="title-text">账号密码</div>
                  <div v-if="userForm.passStrength" class="desc">
                    当前密码强度：
                    <span v-if="userForm.passStrength == '弱'" class="red">{{
                      userForm.passStrength
                    }}</span>
                    <span v-if="userForm.passStrength == '中'" class="middle">{{
                      userForm.passStrength
                    }}</span>
                    <span v-if="userForm.passStrength == '强'" class="green">{{
                      userForm.passStrength
                    }}</span>
                  </div>
                </div>
                <div>
                  <a @click="changePass">修改</a>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="title-text">绑定手机</div>
                  <div class="desc">
                    <span v-if="userForm.mobile"
                      >已绑定手机：{{ userForm.mobile }}</span
                    >
                    <span v-else>未绑定手机号</span>
                  </div>
                </div>
                <div>
                  <a @click="showChangeMobile">修改</a>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="title-text">绑定邮箱</div>
                  <div class="desc">
                    <span v-if="userForm.email"
                      >已绑定邮箱：{{ userForm.email }}</span
                    >
                    <span v-else>未绑定邮箱</span>
                  </div>
                </div>
                <div>
                  <a @click="showChangeEmail">修改</a>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="title-text">密保问题</div>
                  <div class="desc">
                    未设置密保问题，密保问题可有效保护账户安全
                  </div>
                </div>
                <div>
                  <a>暂不支持设置</a>
                </div>
              </div>
            </div>
            <div v-show="currMenu == '第三方账号绑定'" class="safe">
              <div class="item">
                <div style="display: flex; align-items: center">
                  <Icon
                    type="logo-github"
                    size="42"
                    color="#181617"
                    style="margin-right: 16px"
                  />
                  <div>
                    <div class="title-text">Github</div>
                    <div class="desc">
                      <span v-if="relate.github"
                        >已绑定Github账号：{{ relate.githubUsername }}</span
                      >
                      <span v-else>当前未绑定Github账号</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.github" @click="toRelateGithub()"
                    >立即绑定</a
                  >
                  <a v-else @click="unRelateGithub()">解除绑定</a>
                </div>
              </div>
              <div class="item">
                <div style="display: flex; align-items: center">
                  <img
                    src="@/assets/QQ.png"
                    width="42px"
                    style="margin-right: 16px"
                  />
                  <div>
                    <div class="title-text">QQ</div>
                    <div class="desc">
                      <span v-if="relate.qq"
                        >已绑定QQ账号：{{ relate.qqUsername }}</span
                      >
                      <span v-else>当前未绑定QQ账号</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.qq" @click="toRelateQQ()">立即绑定</a>
                  <a v-else @click="unRelateQQ()">解除绑定</a>
                </div>
              </div>
              <div class="item">
                <div style="display: flex; align-items: center">
                  <Icon
                    custom="iconfont icon-weixin"
                    size="40"
                    style="margin-right: 16px; color: #60c126"
                  ></Icon>
                  <div>
                    <div class="title-text">微信</div>
                    <div class="desc">
                      <span v-if="relate.wechat"
                        >已绑定微信账号：{{ relate.wechatUsername }}</span
                      >
                      <span v-else>当前未绑定微信账号</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.wechat" @click="toRelateWechat()"
                    >立即绑定</a
                  >
                  <a v-else @click="unRelateWechat()">解除绑定</a>
                </div>
              </div>
              <div class="item">
                <div style="display: flex; align-items: center">
                  <img
                    src="@/assets/weibo.png"
                    width="41px"
                    style="margin-right: 16px"
                  />
                  <div>
                    <div class="title-text">微博</div>
                    <div class="desc">
                      <span v-if="relate.weibo"
                        >已绑定微博账号：{{ relate.weiboUsername }}</span
                      >
                      <span v-else>当前未绑定微博账号</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.weibo" @click="toRelateWeibo()">立即绑定</a>
                  <a v-else @click="unRelateWeibo()">解除绑定</a>
                </div>
              </div>
              <div class="item">
                <div style="display: flex; align-items: center">
                  <img
                    src="@/assets/dingding.png"
                    width="41px"
                    style="margin-right: 16px"
                  />
                  <div>
                    <div class="title-text">钉钉</div>
                    <div class="desc">
                      <span v-if="relate.dingding"
                        >已绑定钉钉账号：{{ relate.dingdingUsername }}</span
                      >
                      <span v-else>当前未绑定钉钉账号</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.dingding" @click="toRelateDingding()"
                    >立即绑定</a
                  >
                  <a v-else @click="unRelateDingding()">解除绑定</a>
                </div>
              </div>
              <div class="item">
                <div style="display: flex; align-items: center">
                  <img
                    src="@/assets/qiyeweixin.png"
                    width="41px"
                    style="margin-right: 16px"
                  />
                  <div>
                    <div class="title-text">企业微信</div>
                    <div class="desc">
                      <span v-if="relate.workwechat"
                        >已绑定企业微信账号：{{
                          relate.workwechatUsername
                        }}</span
                      >
                      <span v-else>当前未绑定企业微信</span>
                    </div>
                  </div>
                </div>
                <div>
                  <a v-if="!relate.workwechat" @click="toRelateWorkwechat()"
                    >立即绑定</a
                  >
                  <a v-else @click="unRelateWorkwechat()">解除绑定</a>
                </div>
              </div>
              <Spin fix v-if="jumping">跳转中...</Spin>
            </div>
            <div v-show="currMenu == '消息通知'" class="safe">
              <div class="item">
                <div>
                  <div class="title-text">系统消息</div>
                  <div class="desc">系统消息将以站内信的形式通知</div>
                </div>
                <div>
                  <i-switch
                    v-model="messageOpen"
                    @on-change="changeMessage"
                    :true-value="1"
                    :false-value="0"
                  >
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
    <!-- 修改密码 -->
    <Modal
      title="修改密码"
      v-model="editPasswordVisible"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <div>
        <Form
          ref="editPasswordForm"
          :model="editPasswordForm"
          :label-width="100"
          label-position="right"
          :rules="passwordValidate"
          style="width: 450px"
        >
          <FormItem label="原密码" prop="oldPass">
            <Input
              type="password"
              v-model="editPasswordForm.oldPass"
              placeholder="请输入现在使用的密码"
            ></Input>
          </FormItem>
          <FormItem label="新密码" prop="newPass">
            <SetPassword
              v-model="editPasswordForm.newPass"
              @on-change="changeInputPass"
            />
          </FormItem>
          <FormItem label="确认新密码" prop="rePass">
            <Input
              type="password"
              v-model="editPasswordForm.rePass"
              placeholder="请再次输入新密码"
            ></Input>
          </FormItem>
          <FormItem> </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          style="width: 100px; margin-right: 5px"
          :loading="savePassLoading"
          @click="saveEditPass"
          >保存</Button
        >
        <Button @click="editPasswordVisible = false">取消</Button>
      </div>
    </Modal>
    <!-- 修改手机号 -->
    <Modal
      title="修改手机号"
      v-model="editMobileVisible"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <Form
        ref="mobileEditForm"
        :model="mobileEditForm"
        :label-width="70"
        :rules="mobileEditValidate"
      >
        <FormItem label="手机号" prop="mobile">
          <Input
            v-model="mobileEditForm.mobile"
            @on-change="hasChangePhone"
            placeholder="请输入新手机号"
          />
        </FormItem>
        <FormItem label="验证码" prop="code" :error="codeError">
          <Row type="flex" justify="space-between">
            <Input
              v-model="mobileEditForm.code"
              placeholder="请输入您收到的短信验证码"
              style="width: 280px"
            />
            <CountDownButton
              ref="countDownMobile"
              @on-click="sendEditMobileCode"
              :disabled="canSendMobileCode"
              :autoCountDown="false"
              :loading="sending"
              :text="getSms"
            />
          </Row>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelInputCodeBox">取消</Button>
        <Button
          type="primary"
          :loading="checkCodeLoading"
          @click="submitEditMobile"
          >提交</Button
        >
      </div>
    </Modal>

    <Modal
      title="修改邮箱"
      v-model="editEmailVisible"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <Form
        ref="emailEditForm"
        :model="emailEditForm"
        :label-width="100"
        :rules="emailEditValidate"
      >
        <FormItem label="新邮箱地址" prop="email">
          <Input
            v-model="emailEditForm.email"
            @on-change="hasChangeEmail"
            placeholder="请输入新邮箱地址"
          ></Input>
        </FormItem>
        <FormItem label="验证码" prop="code" :error="codeError">
          <Row type="flex" justify="space-between">
            <Input
              v-model="emailEditForm.code"
              placeholder="请输入您收到的邮件中的验证码"
              style="width: 250px"
            />
            <CountDownButton
              ref="countDownEmail"
              @on-click="sendVerifyEmail"
              :disabled="canSendEditEmail"
              :autoCountDown="false"
              :loading="sending"
              :text="getSms"
            />
          </Row>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelEditEmail">取消</Button>
        <Button
          type="primary"
          :loading="editEmailLoading"
          @click="submitEditEmail"
          >提交</Button
        >
      </div>
    </Modal>

    <check-password ref="checkPassMobile" @on-success="checkSuccessMobile" />

    <check-password ref="checkPassEmail" @on-success="checkSuccessEmail" />
  </div>
</template>

<script>
import {
  userInfo,
  userInfoEdit,
  relatedInfo,
  // unRelate,
  // githubLogin,
  // qqLogin,
  // weiboLogin,
  // wechatLogin,
  // dingdingLogin,
  // workwechatLogin,
  sendEditEmail,
  editEmail,
  sendLoginSms,
  changeMobile,
  getProvinceData,
  getAreaCityList,
} from "@/api/index";
import { validateMobile } from "@/libs/validate";
import CountDownButton from "@/views/my-components/freight/count-down-button";
import uploadPicThumb from "@/views/my-components/freight/upload-pic-thumb";
import checkPassword from "@/views/my-components/freight/check-password";
import Cookies from "js-cookie";
import messageVue from "../message/message.vue";
import { getStore, setStore } from "@/libs/storage";
// 修改密码
import SetPassword from "@/views/my-components/freight/set-password";
import { changePass } from "@/api/index";
export default {
  components: {
    uploadPicThumb,
    checkPassword,
    CountDownButton,
    SetPassword,
  },
  name: "ownspace_index",
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPass) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      activeName: "基本信息",
      area: 86,
      messageOpen: 1,
      avatarImg: "",
      userForm: {
        id: "",
        avatar: "",
        username: "",
        sex: "",
        mobile: "",
        email: "",
        status: "",
        type: "",
        typeTxt: "",
        address: [],
        addressSelection: [],
      },
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      mobileEditForm: {
        mobile: "",
        code: "",
      },
      emailEditForm: {
        email: "",
        code: "",
      },
      AddressData: [],
      addressAddress: [],
      codeError: "",
      initPhone: "",
      initEmail: "",
      saveLoading: false,
      sending: false,
      getSms: "获取验证码",
      canSendMobileCode: true, // 是否可点获取验证码
      checkCodeLoading: false,
      checkPassLoading: false,
      editEmailLoading: false,
      mobileEditValidate: {
        mobile: [
          { required: true, message: "请输入手机号码" },
          { validator: validateMobile },
        ],
      },
      emailEditValidate: {
        email: [
          { required: true, message: "请输入邮箱地址" },
          { type: "email", message: "邮箱格式不正确" },
        ],
      },
      editMobileVisible: false, // 显示填写验证码box
      editEmailVisible: false,
      canSendEditEmail: true,
      relate: {},
      jumping: false,
      currMenu: "基本信息",
      dictSex: this.$store.state.dict.sex,

      // 修改密码
      editPasswordVisible: false,
      savePassLoading: false,
      editPasswordForm: {
        oldPass: "",
        newPass: "",
        rePass: "",
      },
      strength: "",
      passwordValidate: {
        oldPass: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPass: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            min: 6,
            message: "请至少输入6个字符，且必须包含数字字母",
            trigger: "blur",
          },
          {
            max: 32,
            message: "最多输入32个字符",
            trigger: "blur",
          },
        ],
        rePass: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur",
          },
          {
            validator: valideRePassword,
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 获取卸货省份数据
    getProvinceDataList() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.AddressData = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    //搜索装货详细地址
    addLoadingProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 搜索卸货详细地址
    addProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    getStartArea(value, selectedData) {
      if (value.length == 3) {
        this.userForm.address = value;
      }
    },
    init() {
      let v = JSON.parse(Cookies.get("userInfo"));
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let userInfo = JSON.parse(str);
      this.userForm = userInfo;
      this.initPhone = userInfo.mobile;
      // this.mobileEditForm.mobile = userInfo.mobile;
      this.initEmail = userInfo.email;
      this.emailEditForm.email = userInfo.email;
      if (this.userForm.type == 0) {
        this.userForm.typeTxt = "普通用户";
      } else if (this.userForm.type == 1) {
        this.userForm.typeTxt = "管理员";
      }
      this.userForm.addressSelection = userInfo.address.split(",");

      // relatedInfo(userInfo.username).then((res) => {
      //   if (res.success) {
      //     this.relate = res.result;
      //   } else {
      //     this.$Message.error("加载绑定第三方账号信息失败");
      //   }
      // });
      let messageOpen = this.getStore("messageOpen");
      if (
        messageOpen != "" &&
        messageOpen != undefined &&
        messageOpen != null
      ) {
        this.messageOpen = Number(messageOpen);
      } else {
        this.setStore("messageOpen", 1);
      }
    },
    changePass() {
      this.editPasswordVisible = true;
      // this.$router.push({
      //   name: "change_pass",
      // });
    },
    changeMenu(v) {
      this.currMenu = v;
    },
    toRelateGithub() {
      this.jumping = true;
      githubLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    toRelateQQ() {
      this.jumping = true;
      qqLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    toRelateWeibo() {
      this.jumping = true;
      weiboLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    toRelateWechat() {
      this.jumping = true;
      wechatLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    toRelateDingding() {
      this.jumping = true;
      dingdingLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    toRelateWorkwechat() {
      this.jumping = true;
      workwechatLogin().then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.jumping = false;
        }
      });
    },
    unRelateGithub() {
      this.$Modal.confirm({
        title: "确认解绑Github账号",
        content: "您确认要解除绑定 " + this.relate.githubUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.githubId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.github = false;
            }
          });
        },
      });
    },
    unRelateQQ() {
      this.$Modal.confirm({
        title: "确认解绑QQ账号",
        content: "您确认要解除绑定 " + this.relate.qqUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.qqId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.qq = false;
            }
          });
        },
      });
    },
    unRelateWeibo() {
      this.$Modal.confirm({
        title: "确认解绑微博账号",
        content: "您确认要解除绑定 " + this.relate.weiboUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.weiboId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.weibo = false;
            }
          });
        },
      });
    },
    unRelateWechat() {
      this.$Modal.confirm({
        title: "确认解绑微信账号",
        content: "您确认要解除绑定 " + this.relate.wechatUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.wechatId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.wechat = false;
            }
          });
        },
      });
    },
    unRelateDingding() {
      this.$Modal.confirm({
        title: "确认解绑钉钉账号",
        content: "您确认要解除绑定 " + this.relate.dingdingUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.dingdingId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.dingding = false;
            }
          });
        },
      });
    },
    unRelateWorkwechat() {
      this.$Modal.confirm({
        title: "确认解绑企业微信账号",
        content: "您确认要解除绑定 " + this.relate.workwechatUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [this.relate.workwechatId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.workwechat = false;
            }
          });
        },
      });
    },
    showChangeMobile() {
      this.$refs.checkPassMobile.show();
    },
    checkSuccessMobile() {
      this.editMobileVisible = true;
    },
    showChangeEmail() {
      this.$refs.checkPassEmail.show();
    },
    checkSuccessEmail() {
      this.editEmailVisible = true;
    },
    saveEdit() {
      this.saveLoading = true;
      if (typeof this.userForm.birth == "object") {
        this.userForm.birth = this.format(this.userForm.birth, "yyyy-MM-dd");
      }
      delete this.userForm.roles;
      userInfoEdit(this.userForm).then((res) => {
        this.saveLoading = false;
        if (res.success) {
          this.$Message.success("保存成功");
          // 获取用户信息
          userInfo().then((res) => {
            location.reload();
            if (res.success) {
              // 避免超过大小限制
              delete res.result.permissions;
              let roles = [];
              res.result.roles.forEach((e) => {
                roles.push(e.name);
              });
              localStorage.setItem("jurisdictionCargo", roles);
              delete res.result.roles;
              this.setStore("roles", roles);
              // 保存7天
              Cookies.set("userInfo", JSON.stringify(res.result), {
                expires: 7,
              });
              this.setStore("userInfo", res.result);
              this.$store.commit("setAvatarPath", res.result.avatar);
              // 加载菜单
              util.initRouter(this);
              this.$router.push({
                name: "home_index",
              });
            } else {
              this.socialLogining = false;
              this.$Message.error("获取登录用户信息失败");
            }
          });
        }
      });
    },

    changeBirth(v) {
      this.userForm.birth = v;
    },
    cancelInputCodeBox() {
      this.editMobileVisible = false;
      this.userForm.mobile = this.initPhone;
    },
    cancelEditEmail() {
      this.editEmailVisible = false;
      this.emailEditForm.email = this.initEmail;
    },
    sendEditMobileCode() {
      this.$refs["mobileEditForm"].validate((valid) => {
        if (valid) {
          this.getSms = "发送中";
          this.sending = true;
          sendLoginSms(this.mobileEditForm.mobile).then((res) => {
            this.getSms = "获取验证码";
            this.sending = false;
            if (res.success) {
              this.$Message.success("发送短信验证码成功");
              // 开始倒计时
              this.$refs.countDownMobile.startCountDown();
            }
          });
        }
      });
    },
    submitEditMobile() {
      this.$refs["mobileEditForm"].validate((valid) => {
        if (valid) {
          if (!this.mobileEditForm.code) {
            this.codeError = "请填写短信验证码";
            return;
          } else {
            this.codeError = "";
          }
          this.checkCodeLoading = true;
          changeMobile(this.mobileEditForm).then((res) => {
            this.checkCodeLoading = false;
            if (res.success) {
              this.$Message.success("修改成功");
              this.userForm.mobile = this.mobileEditForm.mobile;
              this.initPhone = this.mobileEditForm.mobile;
              this.updateUserInfo();
              this.editMobileVisible = false;
            }
          });
        }
      });
    },
    hasChangePhone() {
      if (this.mobileEditForm.mobile == this.initPhone) {
        this.canSendMobileCode = true;
      } else {
        this.$refs["mobileEditForm"].validate((valid) => {
          if (valid) {
            this.canSendMobileCode = false;
          } else {
            this.canSendMobileCode = true;
          }
        });
      }
    },
    hasChangeEmail() {
      if (this.emailEditForm.email == this.initEmail) {
        this.canSendEditEmail = true;
      } else {
        this.canSendEditEmail = false;
      }
    },
    sendVerifyEmail() {
      this.$refs["emailEditForm"].validate((valid) => {
        if (valid) {
          this.getSms = "发送中";
          this.sending = true;
          sendEditEmail(this.emailEditForm.email).then((res) => {
            this.getSms = "获取验证码";
            this.sending = false;
            if (res.success) {
              this.$Message.success("发送邮件验证码成功，请注意查收");
              // 开始倒计时
              this.$refs.countDownEmail.startCountDown();
            }
          });
        }
      });
    },
    submitEditEmail() {
      this.$refs["emailEditForm"].validate((valid) => {
        if (valid) {
          if (!this.emailEditForm.code) {
            this.codeError = "验证码不能为空";
            return;
          } else {
            this.codeError = "";
          }
          this.editEmailLoading = true;
          editEmail(this.emailEditForm).then((res) => {
            this.editEmailLoading = false;
            if (res.success) {
              this.initEmail = this.emailEditForm.email;
              this.userForm.email = this.emailEditForm.email;
              this.updateUserInfo();
              this.$Message.success("修改邮件成功");
              this.editEmailVisible = false;
            }
          });
        }
      });
    },
    updateUserInfo() {
      // 更新用户信息
      userInfo().then((res) => {
        if (res.success) {
          // 避免超过大小限制
          delete res.result.permissions;
          delete res.result.roles;
          if (this.getStore("saveLogin")) {
            // 保存7天
            Cookies.set("userInfo", JSON.stringify(res.result), {
              expires: 7,
            });
          } else {
            Cookies.set("userInfo", JSON.stringify(res.result));
          }
          this.setStore("userInfo", res.result);
        }
      });
    },
    changeMessage(v) {
      this.setStore("messageOpen", v);
    },
    // 修改密码
    changeInputPass(v, grade, strength) {
      this.strength = strength;
    },
    saveEditPass() {
      let params = {
        password: this.editPasswordForm.oldPass,
        newPass: this.editPasswordForm.newPass,
        passStrength: this.strength,
      };
      this.$refs["editPasswordForm"].validate((valid) => {
        if (valid) {
          this.savePassLoading = true;
          changePass(params).then((res) => {
            this.savePassLoading = false;
            if (res.success) {
              this.$Modal.success({
                title: "修改密码成功",
                content: "修改密码成功，需重新登录",
                onOk: () => {
                  this.$store.commit("logout", this);
                  this.$store.commit("clearOpenedSubmenu");
                  this.$router.push({
                    name: "login",
                  });
                },
              });
            }
          });
        }
      });
    },
    cancelEditPass() {
      this.$store.commit("removeTag", "change_pass");
      localStorage.pageOpenedList = JSON.stringify(
        this.$store.state.app.pageOpenedList
      );
      let lastPageName = "";
      let length = this.$store.state.app.pageOpenedList.length;
      if (length > 1) {
        lastPageName = this.$store.state.app.pageOpenedList[length - 1].name;
      } else {
        lastPageName = this.$store.state.app.pageOpenedList[0].name;
      }
      this.$router.push({
        name: lastPageName,
      });
    },
  },
  mounted() {
    // ;
    this.getProvinceDataList();
    let type = this.$route.query.type;
    if (type == "social") {
      this.activeName = "第三方账号绑定";
      this.currMenu = "第三方账号绑定";
    }
    this.init();
  },
};
</script>
